import React from 'react';
import ReactEcharts from 'echarts-for-react';

var createReactClass = require('create-react-class');
const BarCharts = createReactClass({
  propTypes: {},
  getOtion: function() {
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      legend: {
        data: ['工人数量', '隐患发现', '险情发现'],
        y: '24px',
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'value',
      },
      yAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      },
      series: [
        {
          name: '工人数量',
          type: 'bar',
          stack: '总量',
          label: {
            show: true,
            position: 'insideRight',
          },
          data: [20, 22, 19, 17, 21, 22, 20],
        },
        {
          name: '隐患发现',
          type: 'bar',
          stack: '总量',
          label: {
            show: true,
            position: 'insideRight',
          },
          data: [3, 4, 2, 3, 5, 3, 2],
        },
        {
          name: '险情发现',
          type: 'bar',
          stack: '总量',
          label: {
            show: true,
            position: 'insideRight',
          },
          data: [2, 1, 1, 3, 1, 2, 1],
        },
      ],
    };
    return option;
  },
  render: function() {
    return (
      <ReactEcharts
        option={this.getOtion()}
        theme="dark"
        style={{ height: '99%', width: '100%' }}
        className="react_for_echarts"
      />
    );
  },
});

export default BarCharts;
